<template>
  <!-- 短信验证 -->

    <el-button
      :disabled="isSending"
      type="primary"
      @click="sendCheckCode"
      plain
      :loading="opLoading"
    >
      <span v-show="!isSending">获取验证码</span>
      <span v-show="isSending">{{ timerCount }}s后再获取</span>
    </el-button>

</template>
<script>
import _ from "lodash";
export default {
  data() {
    return {
      opLoading: false,
      isSending: false,
      timerCount: 60,
    };
  },

  watch: {},

  computed: {},

  mounted() {},

  methods: {
    //发送验证码
    sendCheckCode:function () {
      this.opLoading = true;
       this.$emit('send', this.startTimer, this.onSendFail);
    },
    //开启倒计时
    startTimer() {
      this.opLoading = false;
      this.isSending = true;
      this.timer = setInterval(() => {
        this.timerCount--;
        if (this.timerCount < 0) {
          this.stopTimer();
        }
      }, 1000);
    },

    onSendFail() {
      this.opLoading = false;
    },

    //关闭倒计时
    stopTimer() {
      if (this.timer !== null) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.timerCount = 60;
      this.isSending = false;
    },
  },
};
</script>
